const {
  resolve
} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// const VueLoaderPlugin = require('vue-loader/lib/plugin');
const {
  VueLoaderPlugin
} = require('vue-loader');

const autoprefixer = require('autoprefixer');

//node环境下commonjs规范：
module.exports = {
  mode: 'development',
  entry: './src/main.js',
  output: {
    path: resolve(__dirname, 'dist'),
    filename: 'main.js'
  },
  //配置外部文件
  externals: {
    'vue': 'Vue'
  },
  devtool: 'source-map',
  module: {
    rules: [{
      test: /\.vue$/,
      loader: 'vue-loader'
    }, {
      test: /\.scss$/,
      use: [
        'vue-style-loader',
        'css-loader',
        {
          loader: 'postcss-loader',
          options: {
            postcssOptions: {
              plugins: [
                autoprefixer({
                  overrideBrowserslist: [
                    "> 1%",
                    "last 2 versions"
                  ]
                })
              ]
            }
          }
        },
        'sass-loader'
      ]
    }]
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      template: resolve(__dirname, 'public/index.html')
    })
  ]
}